<template>
    <div class="mui-numbox" data-numbox-step='1' data-numbox-min='1'>
        <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
        <input ref="cartNum" class="mui-numbox-input" type="number" @change="getNumBoxVal"/>
        <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
    </div>
</template>

<script>
    import mui from "../../lib/mui-master/dist/js/mui.min"
    export default {
        name: "numbox",
        data() {
            return {
                cartNum: null,
            }
        },
        methods: {
            getNumBoxVal() {
                // 调用父组件方法
                this.$emit('getNumBoxVal',this.cartNum.value)
            }
        },

        props:['maxVal'],
        // 监听可购买数量的最大值（原因已经说过 ImgContent.vue 和 CommodityInfo.vue都有说明）
        watch: {
          'maxVal': function (newVal, oldVal) {
              // console.log(newVal + '---------' + oldVal);
              if (newVal != undefined) {
                  mui(".mui-numbox").numbox().setOption('max',newVal)
              }
          }  
        },
        mounted() {
            this.cartNum = this.$refs.cartNum;
            mui.init();
            mui(".mui-numbox").numbox()
        }
    }
</script>

<style scoped>

</style>